<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
  <style media="screen">
    #view{
      width: 200;
      height: 100;
      overflow: hidden;
      position: absolute;
    }
    .aa{
      background: #eee;
      width: 200;
      height: 100;
      left: 0;
      position: absolute;
    }
    .bb{
      background: SkyBlue;
      width: 200;
      height: 100;
      left: 200;
      position: absolute;
    }
    .cc{
      background: #263;
      width: 200;
      height: 100;
      left: 400;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="view" style="height:800">
    <div class="">
      <input type="text" name="" v-model="input1">
      <button type="button" name="button" @click="add1"  >add</button>
      <select v-model="seleted1"  multiple>
        <option v-for="(item, index) of list1">{{item}}</option>
      </select>
    </div>
    <br>
    <button type="button" name="button"  @click="up"  v-if="this.seleted2.length > 0"> &lt;</button>
    <button type="button" name="button"  @click="up"  v-else>&nbsp;</button>
    <button type="button" name="button"  @click="down"  v-if="this.seleted1.length > 0">&gt;</button>
    <button type="button" name="button"  @click="down"  v-else>&nbsp;</button>
    <br><br>
    <div class="">
      <input type="text" name="" v-model="input2">
      <button type="button" name="button" @click="add2"  >add</button>
      <select v-model="seleted2"  multiple>
        <option v-for="(item, index) of list2">{{item}}</option>
      </select>
    </div>

  </div>

  <script type="text/javascript">
    var vm = new Vue({
      el:"#view",
      data:{
        input1:"",
        list1:[],
        seleted1:[],
        input2:"",
        list2:[],
        seleted2:[]
      },
      methods:{
        add1(event){
          console.log(this.input1);
          this.list1.push(this.input1);
          this.input1 = "";
        },
        add2(event){
          this.list2.push(this.input2);
          this.input2 = "";
        },
        up(){
          this.list1.push(...this.seleted2);
          this.seleted1.push(...this.seleted2);

          let set = new Set(this.list2);
          for (var i = 0; i < this.seleted2.length; i++) {
            set.delete(this.seleted2[i]);
          }
          this.list2 = [...set];
          this.seleted2.length = 0;
        },
        down(){
          this.list2.push(...this.seleted1);
          this.seleted2.push(...this.seleted1);

          let set = new Set(this.list1);
          for (var i = 0; i < this.seleted1.length; i++) {
            set.delete(this.seleted1[i]);
          }
          this.list1 = [...set];
          this.seleted1.length = 0;
        }
      }
    })

  </script>
</body>

</html>
